<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6盒子模型</title>
  <style>
    .card{
      width: 300px;
      background-color: #e8e8e8;
      /*内间距 四个方向都是10px*/
      padding: 10px;
      /*下外间距30px*/
      margin-bottom: 30px;
    }
    .card>img{
      /*图片宽度是父级卡片宽度的100%*/
      width:100%;
    }
    .card>p{
      border: 5px solid #f00;
      /*外间距 上 右 下 左 顺时针赋值*/
      margin: 10px 20px 30px 40px;
    }
  </style>
</head>
<body>
<div class="card">
  <img src="img/1.png" alt="">
  <p>我是文字</p>
</div>
<div class="card">
  <img src="img/1.png" alt="">
  <p>我是文字</p>
</div>
</body>
</html>